<template>
  <div class="login-container">
    <div class="form-wrapper">
      <span class="title">用户登录</span>
      <el-form ref="formRef" size="large" :model="formData" :rules="formRules" class="form" autocomplete="off">
        <el-form-item prop="username">
          <div class="icon-wrapper">
            <svg-icon icon="username" />
          </div>
          <el-input type="text" v-model="formData.username" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item prop="password">
          <div class="icon-wrapper">
            <svg-icon icon="lock" />
          </div>
          <el-input :type="inputType" v-model="formData.password" placeholder="请输入密码" @keyup.enter.native="loginHandle" />
          <div class="icon-wrapper eye">
            <svg-icon :icon="inputType === 'text' ? 'eye-crossed' : 'eye'" @click="toggle(inputType)" />
          </div>
        </el-form-item>
        <el-button type="primary" :loading="loading" :disabled="hasLogin" @click="loginHandle"
          style="width: 100%;height: 32px;font-size: 12px">登&nbsp;录
        </el-button>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router';
import { useStore } from "vuex";
import { delay } from "@/utils";
import { toast } from "@/hook/toast";
import { ElNotification } from 'element-plus'
import IM from '../../ws';

const router = useRouter()
const store = useStore()

const hasLogin = computed(() => store.getters.hasLogin)
const loading = ref(false)
const formRef = ref(null)
const formData = ref({
  username: '',
  password: ''
})
const inputType = ref('password')

function getWelcomeTime(name) {
  const date = new Date()
  const hour = date.getHours()
  if (hour >= 0 && hour <= 5) return `时间不早了,早点休息吧${name}`
  if (hour > 5 && hour <= 10) return `早上好,${name}`
  if (hour > 10 && hour <= 12) return `中午好,${name}`
  if (hour > 12 && hour <= 18) return `下午好,${name}`
  if (hour > 18 && hour <= 22) return `晚上好,${name}`
  if (hour > 22 && hour < 24) return `时间不早了,早点休息吧${name}`
}

function loginHandle() {
  formRef.value.validate().then(async flag => {
    if (!flag) return
    loading.value = true
    const { username, password } = formData.value
    console.log('查询资料')
    const [error, resp] = await store.dispatch('app/login', {
      mobile: username,
      password: password,
    })
    await delay(300)
    if (error) {
      loading.value = false
      return
    }
    const { nickname } = resp
    IM.init()
    ElNotification({
      title: '登录成功',
      message: getWelcomeTime(nickname),
      type: 'success',
      duration: 1500,
      onClose: () => {
        router.replace({ name: 'profile' }).catch(() => null)
      }
    })
  }).catch(err => {
    console.log(err)
  })
}

const formRules = {
  username: [
    {
      required: true,
      message: '请输入用户名!',
      trigger: 'blur',
    },
  ],
  password: [
    {
      required: true,
      message: '请输入密码!',
      trigger: 'blur',
    }
  ]
}

const toggle = v => {
  if (v === 'password') {
    inputType.value = 'text'
    return
  }
  inputType.value = 'password'
}

const toProfile = () => {
  router.push('/profile').catch(() => null)
}
const toTest = () => {
  router.push('/test').catch(() => null)
}
</script>

<style lang="scss" scoped>
.login-container {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background: #2d3a4b;

  .form-wrapper {
    width: 90vw;
    max-width: 520px;
    min-width: 280px;
    padding: 120px 16px;
    box-sizing: border-box;
    margin: 0 auto;

    :deep(.el-form-item) {
      &.is-error .el-input__wrapper {
        box-shadow: unset !important;
      }

      input:-webkit-autofill,
      textarea:-webkit-autofill,
      select:-webkit-autofill {
        -webkit-text-fill-color: #fff !important;
        -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
        background-color: transparent;
        background-image: none;
        transition: background-color 50000s ease-in-out 500000s; //背景色透明  生效时长  过渡效果  启用时延迟的时间
      }
    }

    .title {
      font-size: 32px;
      color: #fff;
      font-weight: bold;
      text-align: center;
      display: block;
      margin-bottom: 30px;
      cursor: pointer;
    }

    .form {

      .el-form-item {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 4px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        box-sizing: border-box;

        .icon-wrapper {
          padding: 0 10px;
          color: #889aa4;
          font-size: 18px;

          &.eye {
            margin-left: 10px;
          }
        }

        ::v-deep(.el-input) {
          width: auto;
          flex: 1;
          --el-input-focus-border-color: transpant;
          --el-input-border-color: transpant;
          --el-input-hover-border-color: transpant;
          --el-input-text-color: #fff;

          .el-input__wrapper {
            background: transparent;
            padding: 0;
          }
        }
      }
    }
  }
}
</style>
